<template>
  <div>
    <el-row>
      <p class="hmingzi">平台用户统计</p>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <statistics :message1="userType" />
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <Broken :message2="userRegistration" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <p class="hmingzi">平台订单统计</p>
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <Deliver :message3="everyDayOrder" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <ordertype :message4="orderBidType" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <orderstatus :message5="orderStatus" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <p class="hmingzi">平台用户数据</p>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <recharge :message6="userTopUp" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <freight :message7="{orderFee,invoiceFee}" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <withdrawal :message8="withdrawal" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <Short :message9="smsNum" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Vue from "vue";
import { fetchList } from "@/api/article";
import statistics from "./components/index1.vue";
import Broken from "./components/index2.vue";
import Deliver from "./components/index3.vue";
import ordertype from "./components/index4.vue";
import orderstatus from "./components/index5.vue";
import recharge from "./components/index6.vue";
import freight from "./components/index7.vue";
import withdrawal from "./components/index8.vue";
import Short from "./components/index9.vue";
export default {
  components: {
    statistics,
    Broken,
    Deliver,
    ordertype,
    orderstatus,
    recharge,
    freight,
    withdrawal,
    Short
  },
  data() {
    return {
      userType: [],
      userRegistration:[],
      everyDayOrder :[],
      orderBidType:[],
      orderStatus:[],
      userTopUp:[],
      orderFee:[],
      invoiceFee:[],
      withdrawal:[],
      smsNum:[],
    };
  },
  created() {
    this.dataStatistics();
  },
  methods: {
    //用户类型饼状图
    dataStatistics() {
      fetchList().then(response => {
        this.userType = JSON.parse(JSON.stringify(response.data.userType).replace(/total/g,"value").replace(/type/g,"name"));
        this.userRegistration = response.data.userRegistration;
        this.everyDayOrder = response.data.everyDayOrder;
        this.orderBidType = response.data.orderBidType;
        this.orderStatus = response.data.orderStatus;
        this.userTopUp = response.data.userTopUp;
        this.orderFee = response.data.orderFee;
        this.invoiceFee = response.data.invoiceFee;
        this.withdrawal = response.data.withdrawal;
        this.smsNum =  response.data.smsNum;
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.hmingzi {
  border-bottom: 1px solid #ccc;
  height: 40px;
  line-height: 24px;
  font-size: 24px;
}
</style>
